﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>经典表单样式定义</title>
    <script src="../../../Scripts/jquery-1.11.0.min.js"></script>
    <script src="../../../Scripts/QueryString.js" type="text/javasFoolFrmBodycript">
    </script>
    <script src="../../../Scripts/config.js" type="text/javascript"></script>
    <script src="../../../Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../../Comm/Gener.js" type="text/javascript"></script>

    <link href="../../CSS/FoolFrmBody.css" rel="stylesheet" />
    <link href="../../CSS/Toolbar.css" rel="stylesheet" />

    <link href="../../../Style/skin/css/Default.css" rel="stylesheet" />
    <link href="../../../Style/skin/adminfont/iconfont.css" rel="stylesheet" />
    <link href="../../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <script src="../../../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <link href="../../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- <script src="../../Admin.js"></script>-->
    <!--<link href="../../../Scripts/bootstrap/css/bootstrap.css" rel="Stylesheet" />-->
    <!-- 用于显示图标 -->
    <link href="../../../Comm/fonts/simple-line-icons.css" rel="stylesheet" />
    <link href="../../../Comm/fonts/font-icons.min.css" rel="stylesheet" />
    <link href="../../../Comm/fonts/font-awesome.css" rel="stylesheet" />
    <script src="StyleEditor.js"></script>
    <!-- 字段的三个风格. -->
    <style type="text/css">
        .layui-btn-radius {
            border-radius: 10px;
        }

        .FoolFrmBody table tr td {
            position: relative
        }

        .input-group {
            position: absolute;
            z-index: 99;
            left: 15px;
            top: 17px;
        }

        .FoolFrmBody input {
            padding-left: 25px;
        }

        .layui-row {
            margin-bottom: 5px;
        }

        .layui-col-xs2 {
            padding-left: 5px
        }

        .layui-inline {
            margin-bottom: 5px;
        }

        .layui-input-inline {
            width: 100px !important;
        }

        .input-icon {
            position: absolute;
            left: 1px;
            top: 1px;
            width: 38px;
            line-height: 36px;
            text-align: center;
            color: #d2d2d2;
        }

        .layui-input, .layui-select, .layui-textarea {
            height: 38px;
            line-height: 1.3;
            line-height: 38px\9;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
        }
    </style>
    <script type="text/javascript">
        var styleNo = null;
        layui.use(['dropdown', 'colorpicker', 'layer', 'table', 'form', 'laydate'], function () {
            var dropdown = layui.dropdown
                , form = layui.form
                , layer = layui.layer
                , colorpicker = layui.colorpicker
                , laydate = layui.laydate
                , element = layui.element
                , $ = layui.jquery;
            form.render('select');
            //绑定模版.
            var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
            ens = hander.DoMethodReturnJSON("Default_GenerTemplate");
            var templates = [];
            var templateName = GetQueryString("Template");


            templateName = templateName == null || templateName == undefined ? "" : templateName;
            $.each(ens, function (i, item) {
                if (item.No == templateName) {
                    $("#TB_Template").html(item.Name);
                }
                templates.push({
                    "id": item.No,
                    "title": item.Name
                });
            })
            dropdown.render({
                elem: '#Btn_Template'
                , data: templates
                , click: function (obj) {
                    TemplateChange(obj.id);
                }
            });

            if (templateName && templateName.indexOf("Sys.") > 0)
                $("#Btn_Delete").attr("disabled", "disabled");

            //绑定面板.
            var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
            ens = hander.DoMethodReturnJSON("Default_GenerGloVars");

            //绑定风格文件
            GenerBindDDL("DDL_Style", ens, "No", "Name");

            //装载风格文件.
            LoadCss();

            //增加事件，调用 StyleEditer.js .
            AddEventExt();

            //增加字段icon.
            AddICON();

            styleNo = $("#DDL_Style").val();


            //设置颜色
            $.each($(".layui-color"), function (i, item) {
                var id = item.id;
                //开启全功能
                colorpicker.render({
                    elem: '#' + id
                    , color: ''
                    , format: 'rgb'
                    , predefine: true
                    , alpha: true
                    , done: function (color) {
                        var cssID = this.elem.replace("#div_", "");
                        $('#TBPara_' + cssID).val(color); //向隐藏域赋值
                        var changeobj = $('#DDL_Style').val();//要改变的对象.
                        if (changeobj) { //判断是否有选中对象
                            var cssText = $("." + changeobj).attr("style")
                            cssText = cssText == null || cssText == undefined ? "" : cssText;
                            cssText = cssText + cssID + ":" + color + " !important";
                            $("." + changeobj).css("cssText", cssText);
                            setTimeout(function () { }, 500);
                        }
                        color || this.change(color); //清空时执行 change
                    }
                    , change: function (color) {
                        var cssID = this.elem.replace("#div_", "");
                        //给当前页面头部和左侧设置主题色
                        var changeobj = $('#DDL_Style').val();//要改变的对象.
                        console.log(changeobj)
                        if (changeobj) { //判断是否有选中对象
                            /*var cssText = $("." + changeobj).attr("style") + cssID + ":" + color + " !important";
                            //$("." + changeobj).css(cssID, color);
                            $("." + changeobj).css("cssText", cssText);
                            setTimeout(function () { }, 500);*/
                            var cssText = $("." + changeobj).attr("style")
                            cssText = cssText == null || cssText == undefined ? "" : cssText;
                            cssText = cssText + cssID + ":" + color + " !important";
                            $("." + changeobj).css("cssText", cssText);
                            setTimeout(function () { }, 500);
                        }
                    }

                });
            });


            //处理工具栏按钮
            $('.layui-toolbar').on('click', function () {
                var url = "";
                var title = "";
                var type = $(this).data('type');
                switch (type) {
                    case "Back": //返回
                        Back();
                        break;
                    case "Btn_App"://应用
                        App();
                        break;
                    case "Btn_Delete"://删除模板
                        Delete(templateName);
                        break;
                    case "Btn_Save"://保存为模板
                        SaveAsTemplate();
                        break;
                    case "Btn_Refresh"://刷新
                        Reload();
                        break;
                    default: break;
                }

            });
            //改变风格Style
            form.on('select(StyleChange)', function (data) {
                if (data.value == null || data.value == "") {
                    //显示.
                    $("#styleeditor").hide();
                    return;
                }
                if (data.value == "FoolFrmTable") {
                    $(".stylegroup").hide();
                    $(".styledetail").hide();

                } else {
                    $(".stylegroup").show();
                    $(".styledetail").show();
                }
                DDLChange(data.value, colorpicker);
                form.render('select');
            });

            form.on('select(ChangeStyle)', function (data) {
                DDLChange("FoolFrmFieldInput", colorpicker);
                form.render('select');
            })

            //字体大小单位的监听
            form.on('select(unit)', function (data) {
                var id = data.elem.id;
                var textId = id.replace("-unit", "");
                var changeobj = $('#DDL_Style').val();//要改变的对象
                var thispropertyval = $("#" + textId).val();//文字大小的值
                if (changeobj) {//判断是否有选中对象
                    var cssText = $("." + changeobj).attr("style")
                    cssText = cssText == null || cssText == undefined ? "" : cssText;
                    cssText += "font-size:" + thispropertyval + data.value + " !important";
                    $("." + changeobj).css("cssText", cssText);
                }
            });
            //字体设计
            form.on('select(font)', function (data) {
                var id = data.elem.id;
                var cssID = id.replace("TBPara_", "");
                cssID = cssID.replace("DDLPara_", "");
                var changeobj = $('#DDL_Style').val();//要改变的对象
                if (changeobj) {
                    var cssText = $("." + changeobj).attr("style")
                    cssText = cssText == null || cssText == undefined ? "" : cssText;
                    cssText +=cssID + ":" + data.value + " !important";
                    $("." + changeobj).css("cssText", cssText);
                }
            })
            //边框
            form.on('select(borderWhich)', function (data) {
                var changeobj = $('#DDL_Style').val();
                var thispropertyval = $("#TBPara_border-width_Temp").val();
                var borderselect = data.value;
                if (changeobj) {
                    var cssText = $("." + changeobj).attr("style");
                    cssText = cssText == null || cssText == undefined ? "" : cssText;
                    if (borderselect == "all") {
                        cssText += "border-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
                    } else {
                        cssText += "border-" + borderselect + "-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
                    }
                    $("." + changeobj).css("cssText", cssText);
                }
            })

            //表单中标签或者输入框的点击事件
            $.each(ens, function (i, en) {
                $("." + en.No).attr("data-info", en.No);
                $("." + en.No).on('click', function () {
                    if ($(this).attr("data-info") == "FoolFrmFieldRow" || $(this).attr("data-info") == "FoolFrmTitle")
                        return;
                    DDLChange($(this).attr("data-info"), colorpicker);
                    form.render();
                    return;
                })
            })

            form.render();



            /**
             * 改变模板文件
             * @param val
             */
            function TemplateChange(val) {
                if (val == "" || val == undefined) {
                    return;
                }

                var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
                hander.AddPara("Name", val);
                var msg = hander.DoMethodReturnString("Default_Template_Selected");

                var url = "?FK_MapData=" + GetQueryString("FK_MapData");
                url += "&FrmID=" + GetQueryString("FrmID");
                url += "&FK_Node=" + GetQueryString("FK_Node");
                url += "&FK_Flow=" + GetQueryString("FK_Flow");
                url += "&Template=" + val;

                SetHref(url);
            }
            /**
             *退回
             */
            function Back() {
                var url = "../Designer.htm?FK_MapData=" + GetQueryString("FK_MapData");
                url += "&FrmID=" + GetQueryString("FrmID");

                url += "&FK_Flow=" + GetQueryString("FK_Flow");
                url += "&FK_Node=" + GetQueryString("FK_Node");
                SetHref(url);
            }
            /*
             * 应用
             */
            function App() {
                layer.confirm('您确认要执行吗？确定后，就会替换现在的风格文件。', {
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);
                    SaveItem();
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
                    var data = hander.DoMethodReturnString("Default_App");

                    if (data.indexOf('err@') == 0) {
                        layer.alert(data);
                        return;
                    }
                    Back();
                }, function (index) {
                    layer.close(index);

                });

            }
            /**
             * 删除模板
             */
            function Delete(val) {

                if (val == "") {
                    layer.alert("请选择一个模版.");
                    return;
                }

                layer.confirm('您确认要执行删除吗？', {
                    btn: ['确定', '取消']
                }, function (index) {
                    layer.close(index);
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
                    hander.AddPara("Name", val);
                    var data = hander.DoMethodReturnString("Default_Template_Delete");
                    alert(data);

                    if (data.indexOf('err@') == 0) {
                        alert(data);
                        return;
                    }
                    Reload();
                }, function (index) {
                    layer.close(index);

                });

            }
            /**
             * 保存为模板
             */
            function SaveAsTemplate() {
                layer.prompt({
                    title: '请输入模版名称,不能有特殊符号.',
                    formType: 0,
                    value: '',
                }, function (str, index) {
                    layer.close(index);
                    if (str == null || str == undefined || str == "")
                        return;
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
                    hander.AddPara("TemplateName", str);
                    var data = hander.DoMethodReturnString("Default_SaveAsTemplate");
                    layer.alert(data);
                    if (data.indexOf('err@') == 0)
                        return;
                });
            }

            /**
             * 动态加载css样式
             */
            function LoadCss() {

                var url = "../../../../DataUser/Style/FoolFrmStyle/DefaultPreview.css?ref=11" + Math.random();

                // 动态加载css
                var loadStyle = function (url) {
                    var link = document.createElement('link');
                    link.rel = "stylesheet";
                    link.type = "text/css";
                    link.href = url;
                    var head = document.getElementsByTagName("head")[0];
                    head.appendChild(link);
                };

                // css加载
                loadStyle(url);

                $('head').children(':last').attr({
                    rel: "stylesheet",
                    type: 'text/css',
                    href: url,
                });
            }

            function SetICONForCtrl(id, icon) {

                var html = "";
                html += ' <i class="' + icon + '"></i>';
                $('#' + id).before(html);
                $("#" + id).css("padding-left", "40px");

            }
            function AddICON() {

                SetICONForCtrl("TB_Tel", "input-icon icon-phone");
                SetICONForCtrl("TB_Email", "input-icon icon-envelope-letter");
                SetICONForCtrl("TB_Addr", "input-icon icon-location-pin");

                SetICONForCtrl("TB_SQR", "input-icon layui-icon layui-icon-username");
                SetICONForCtrl("TB_SQRQ", "input-icon layui-icon layui-icon-date");
            }
        });
        //保存应用.
        function SaveItem(styleNo) {

            if (styleNo == null || styleNo == undefined)
                styleNo = $("#DDL_Style").val();
            en = new Entity("BP.Sys.GloVar", styleNo);

            $("#Btn_SaveItem").val("正在保存...");
            if (en.AtPara == null || en.AtPara == undefined)
                en.AtPara = "";

            //处理数据.
            DealHidCtrl();

            //设置为空.
            en.AtPara = "";

            //执行copy.
            en.CopyForm();

            en.Val = en.AtPara;
            if (en.Val == "") {
                alert("err");
                return;
            }
            // alert(en.AtPara);
            en.Update();

            //生成风格文件作用于.
            var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
            var data = hander.DoMethodReturnString("GloValStyles_App");

            $("#Btn_SaveItem").val("保存成功....");
            setTimeout(function () { $("#Btn_SaveItem").val("保存"); }, 500);
        }

        //调样式的面板
        function DDL_Style_Change() {

            var val = $("#DDL_Style").val();
            if (val == null || val == "") {
                //显示.
                $("#styleeditor").hide();

                //执行一次保存.
                //SaveItem();
                return;
            }

            if (val == "FoolFrmTable") {
                $(".stylegroup").hide();
                $(".styledetail").hide();

            } else {
                $(".stylegroup").show();
                $(".styledetail").show();
            }

            DDLChange(val);
        }


        function DDLChange(changeToStyleNo, colorpicker) {

            //显示.
            $("#styleeditor").show();

            //保存旧的条目.
            SaveItem(styleNo);

            styleNo = changeToStyleNo;

            en = new Entity("BP.Sys.GloVar", styleNo);

            //执行批量赋值.
            var val = en.Val;
            en.AtPara = val;
            GenerFullAllCtrlsVal(en);



            $("#DDL_Style").val(styleNo);

        }

    </script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" style="text-align: center;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);background-color:white">
            <div class="layui-btn-container" style="padding-top:10px">
                <button type="button" class="layui-btn  layui-btn-sm  layui-toolbar" data-type="Back">
                    <i class="layui-icon layui-icon-return"></i>返回
                </button>
                <button class="layui-btn  layui-btn-normal layui-btn-sm   layui-toolbar" id="Btn_Template">
                    <span id="TB_Template">请选择模板</span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>

                <button type="button" class="layui-btn  layui-btn-warm layui-btn-sm  layui-toolbar" data-type="Btn_App">
                    <i class="layui-icon layui-icon-app"></i>应用
                </button>
                <button type="button" class="layui-btn layui-btn-danger  layui-btn-sm  layui-toolbar" data-type="Btn_Delete" id="Btn_Delete">
                    <i class="layui-icon layui-icon-delete"></i>删除模版
                </button>
                <button type="button" class="layui-btn layui-btn-warm layui-btn-sm  layui-toolbar" data-type="Btn_Save">
                    <i class="layui-icon layui-icon-save"></i>保存为模版
                </button>
                <button type="button" class="layui-btn   layui-btn-sm  layui-toolbar " data-type="Btn_Refresh">
                    <i class="layui-icon layui-icon-refresh"></i>刷新
                </button>
            </div>
        </div>
        <div class="layui-body" style="margin-top:20px;left:15px">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-col-xs8">
                        <div class="layui-card layui-panel" style="height:100%">
                            <div class="layui-card-body">
                                <div class="layui-row FoolFrmTitle">
                                    <div class="layui-col-xs12">
                                        <div class="FoolFrmTitleIcon pull-right"><img src='../../../../DataUser/ICON/LogBiger.png' style='height:40px;' /></div>
                                        <div class="FoolFrmTitleLable">经典表单样式定义器</div>

                                    </div>
                                </div>
                                <div class="layui-row FoolFrmGroupBar">
                                    <div class="layui-col-xs12">基本信息</div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">

                                    <div class="layui-col-xs2 FoolFrmFieldLabel">申请人</div>
                                    <div class="layui-col-xs4">
                                            <input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQR" value="驰骋工作流" />
                                    </div>
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">申请日期</div>
                                    <div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQRQ" value="2003-02-23" /></div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">地址</div>
                                    <div class="layui-col-xs10">
                                        <input class="layui-input  FoolFrmFieldInput" type="text" id="TB_Addr" value="济南市.高新区.碧桂园凤凰中心19层" />
                                    </div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">
                                    <div class="layui-col-xs12 FoolFrmFieldLabel"><span style="color:red">*</span>申请原因</div>
                                    <div class="layui-col-xs12">
                                        <textarea class="layui-textarea  FoolFrmFieldInput" id="TB_SQYY" placeholder="不少于50字，请仔细填写" cols="10"></textarea>
                                    </div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">电话</div>
                                    <div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Tel" value="0531-82374939" /></div>
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">邮件</div>
                                    <div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Email" value="ccs@ccflow.org" /></div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">
                                    <div class="layui-col-xs2 FoolFrmFieldLabel"> 是否执行到位？</div>
                                    <div class="layui-col-xs4 FoolFrmFieldInput">
                                        <div class="">
                                            <input type="checkbox" name="CB_IsOK" lay-skin="switch" lay-text="ON|OFF">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">性别</div>
                                    <div class="layui-col-xs4">
                                        <select name="DDL_XB" id="DDL_XB" lay-filter="ChangeStyle">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-row FoolFrmFieldRow">
                                    <div class="layui-col-xs2 FoolFrmFieldLabel">整治面貌</div>
                                    <div class="layui-col-xs10 FoolFrmFieldInput">
                                        <input type="radio" id="TB_ZZMM_0" name="ZZMM" value="0" title="群众" checked>
                                        <input type="radio" id="TB_ZZMM_1" name="ZZMM" value="1" title="团员" />
                                        <input type="radio" id="TB_ZZMM_2" name="ZZMM" value="2" title="党员" />
                                        <input type="radio" id="TB_ZZMM_3" name="ZZMM" value="3" title="无党派人士" />
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs4">
                        <div class="layui-card layui-panel" style="margin: 0px 30px 30px;">
                            <div class="layui-card-body">
                                <div>
                                    <div>
                                        <select name="DDL_Style" id="DDL_Style" lay-filter="StyleChange" style="width:200px"></select>
                                        <div id="styleeditor" style="display:block;width:100%;">
                                            <div class="ttstyle">整体</div>
                                            <div class="styletitle layui-inline">
                                                <label class="layui-form-label"> 背景颜色：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" type="hidden" id="TBPara_background-color" value="" />
                                                    <div id="div_background-color" class="layui-color"></div>
                                                </div>
                                            </div>
                                            <div class="layui-inline styletitle">
                                                <label class="layui-form-label"> 整体宽度：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_selfbody-width_Temp" value="" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_selfbody-width-unit_Temp" lay-filter="unit">
                                                        <option value="px">px</option>
                                                        <option value="pt">pt</option>
                                                        <option value="em">em</option>
                                                        <option value="ex">ex</option>
                                                        <option value="pc">pc</option>
                                                        <option value="cm">cm</option>
                                                        <option value="mm">mm</option>
                                                        <option value="in">in</option>
                                                        <option value="%">%</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="TBPara_selfbody-width" />
                                            </div>


                                            <div class="layui-inline styletitle">
                                                <label class="layui-form-label">  整体高度：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_selfbody-hight_Temp" value="" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_selfbody-hight-unit_Temp" lay-filter="unit">
                                                        <option value="px">px</option>
                                                        <option value="pt">pt</option>
                                                        <option value="em">em</option>
                                                        <option value="ex">ex</option>
                                                        <option value="pc">pc</option>
                                                        <option value="cm">cm</option>
                                                        <option value="mm">mm</option>
                                                        <option value="in">in</option>
                                                        <option value="%">%</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="TBPara_selfbody-hight" />
                                            </div>
                                            <div class="ttstyle stylegroup">字体</div>
                                            <div class="styletitle styledetail layui-inline">
                                                <label class="layui-form-label">字体大小：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_font-size_Temp" value="" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_font-size-unit_Temp" lay-filter="unit">
                                                        <option value="px">px</option>
                                                        <option value="pt">pt</option>
                                                        <option value="em">em</option>
                                                        <option value="ex">ex</option>
                                                        <option value="pc">pc</option>
                                                        <option value="cm">cm</option>
                                                        <option value="mm">mm</option>
                                                        <option value="in">in</option>
                                                        <option value="%">%</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="TBPara_font-size" />

                                            </div>
                                            <div class="styletitle styledetail  layui-inline">
                                                <label class="layui-form-label"> 字体粗细：</label>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_font-weight" lay-filter="font">
                                                        <option value="normal">正常</option>
                                                        <option value="bold">加粗</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="styletitle styledetail  layui-inline">
                                                <label class="layui-form-label"> 字体样式：</label>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_font-style" lay-filter="font">
                                                        <option value="normal">正常</option>
                                                        <option value="italic">斜体</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="styletitle styledetail  layui-inline">
                                                <label class="layui-form-label">字体行高：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_font-height_Temp" value="" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_font-height-unit_Temp" lay-filter="unit">
                                                        <option value="px">px</option>
                                                        <option value="pt">pt</option>
                                                        <option value="em">em</option>
                                                        <option value="ex">ex</option>
                                                        <option value="pc">pc</option>
                                                        <option value="cm">cm</option>
                                                        <option value="mm">mm</option>
                                                        <option value="in">in</option>
                                                        <option value="%">%</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="TBPara_font-height" />
                                            </div>
                                            <div class="styletitle styledetail layui-inline">
                                                <label class="layui-form-label">字体款式：</label>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_font-family" lay-filter="font">
                                                        <option value="SimSun">宋体</option>
                                                        <option value="SimHei">黑体</option>
                                                        <option value="Microsoft YaHei">微软雅黑</option>
                                                        <option value="Microsoft JhengHei">微软正黑体</option>
                                                        <option value="NSimSun">新宋体</option>
                                                        <option value="PMingLiU">新细明体</option>
                                                        <option value="MingLiU">细明体</option>
                                                        <option value="DFKai-SB">标楷体</option>
                                                        <option value="FangSong">仿宋</option>
                                                        <option value="KaiTi">楷体</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="styletitle styledetail layui-inline">
                                                <label class="layui-form-label"> 字体颜色：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_color" value="" type="hidden" />
                                                    <div id="div_color" class="layui-color"></div>
                                                </div>

                                            </div>
                                            <div class="ttstyle stylegroup">
                                                <label class="layui-form-label"> 边框：</label>
                                                <div class="layui-input-inline" style="float:left">
                                                    <select id="TBPara_border-which" lay-filter="borderWhich">
                                                        <option value="all" selected>全部</option>
                                                        <option value="top">上</option>
                                                        <option value="bottom">下</option>
                                                        <option value="left">左</option>
                                                        <option value="right">右</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="styletitle styledetail layui-inline">
                                                <label class="layui-form-label"> 边框宽度：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_border-width_Temp" value="" />
                                                </div>
                                                <div class="layui-input-inline">
                                                    <select id="TBPara_border-width-unit_Temp" lay-filter="unit">
                                                        <option value="px">px</option>
                                                        <option value="pt">pt</option>
                                                        <option value="em">em</option>
                                                        <option value="ex">ex</option>
                                                        <option value="pc">pc</option>
                                                        <option value="cm">cm</option>
                                                        <option value="mm">mm</option>
                                                        <option value="in">in</option>
                                                        <option value="%">%</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="TBPara_border-width" />
                                            </div>
                                            <div class="styletitle styledetail">
                                                <label class="layui-form-label"> 边框颜色：</label>
                                                <div class="layui-input-inline">
                                                    <input class="borderwidthval layui-input" id="TBPara_border-color" value="" type="hidden" />
                                                    <div id="div_border-color" class="layui-color"></div>
                                                </div>
                                            </div>
                                            <div class="styletitle styledetail layui-inline">
                                                <label class="layui-form-label"> 边框样式：</label>
                                                <div class="layui-input-inline">
                                                    <select id="DDLPara_border-style" lay-filter="font" style="width:50px">
                                                        <option value="none">无</option>
                                                        <option value="solid">实线</option>
                                                        <option value="double">双线</option>
                                                        <option value="groove">3D凹槽</option>
                                                        <option value="ridge">3D垄状</option>
                                                        <option value="dashed">虚线</option>
                                                        <option value="dotted">点状</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" id="Btn_SaveItem" onclick="SaveItem()" class="layui-btn layui-btn-fluid">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>
</html>